<template>
  <div class="cart-item">
    <div class="item-selctor" @click="clickCheckBTn">
      <check-btn :is-checked="product.checked"></check-btn>
    </div>
    <div class="image">
      <img :src="product.image" alt="" />
    </div>
    <div class="info">
      <div class="tltle">
        <p>{{ product.title }}</p>
      </div>
      <div class="desc">
        <span>颜色：{{ product.color }}</span>
      <span>尺寸：{{ product.size }}</span>
      </div>
      <div class="num">
        <span class="price">{{ product.price }}</span>
        <span class="count">x{{ product.count }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import CheckBtn from "components/content/checkbutton/CheckBtn";
export default {
  components: { CheckBtn },
  naem: "CartListItem",
  props: {
    product: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    clickCheckBTn() {
      this.product.checked = !this.product.checked;
    },
  },
};
</script>

<style scoped>
.cart-item {
  display: flex;
  margin: 5px 10px 5px 3px;
  border-bottom: 3px solid #eee;
}
.item-selctor {
  margin-top: 50px;
  margin-right: 3px;
}

.image {
  width: 22%;
}
.image img {
  width: 100%;
  height: 120px;
  border-radius: 7px;
}
.info {
  width: 73%;
  margin-left: 15px;
  /* padding-right: 15px; */
}
.info .tltle {
  margin-top: 5px;
  font-size: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info .desc {
  margin-top: 15px;
  font-size: 16px;
}
.desc span{
  padding-right: 12px;
}
.num {
  margin-top: 20px;
}
.num .price {
  font-size: 18px;
  font-weight: 700;
  color: orange;
}
.num .count {
  float: right;
  font-size: 18px;
  font-weight: 700;
  margin-right: 10px;
}
</style>
